<template>
  <div class="wrapper">
    <header>
      <div class="box">
        <div class="icon">
          <i class="iconfont icon-tianjia"></i>
        </div>

        <div class="search">
          <div class="search-icon">
            <i class="iconfont icon-sousuo"></i>
          </div>
          <input type="text" v-on:click="turntosearch" />
        </div>
        <div class="sort-icon">
          <router-link active-class="active" to="/classify"
            ><i class="iconfont icon-fenlei"></i>
          </router-link>
        </div>
        <div class="xiaoxi-icon">
          <i class="iconfont icon-xiaoxi"></i>
        </div>
      </div>
      <div class="nav">
        <div>
          <router-link active-class="active-icon" to="/home/camp-guanzhu"
            ><span>关注 </span></router-link
          >
        </div>
        <div>
          <router-link active-class="active-icon" to="/home/camp-tuijian"
            ><span>推荐 </span></router-link
          >
        </div>
        <div>
          <router-link active-class="active-icon" to="/home/camp-biji">
            <span>笔记 </span></router-link
          >
        </div>
        <div>
          <router-link active-class="active-icon" to="/home/camp-shipin">
            <span>视频 </span></router-link
          >
        </div>
        <div>
          <router-link active-class="active-icon" to="/home/camp-huodong"
            ><span>活动 </span></router-link
          >
        </div>
        <div>
          <router-link active-class="active-icon" to="/home/camp-muying">
            <span>母婴 </span></router-link
          >
        </div>
        <div>
          <router-link active-class="active-icon" to="/home/camp-hongbei"
            ><span>安佳烘焙</span></router-link
          >
        </div>
      </div>
    </header>
    <main>
      <!-- <img src="../assets/img/jiazai.gif" alt=""> -->
      <router-view></router-view>
    </main>

    <Hisfooter />
  </div>
</template>


<script>
import Hisfooter from "@/components/footer.vue";
export default {
  components: {
    Hisfooter,
  },
  methods:{
    turntosearch(){
      this.$router.push({path:'/food-search'})
    }
  },
  beforeRouteUpdate(to, from, next) {
    console.log(from);
    next();
  },
};
</script>
<style lang="scss">
@import url("../assets/css/ali/iconfont.css");
.wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  position: relative;
  header {
    position: fixed;

    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 76px;
    // background-color: pink;
    color: black;
    padding-top: 3px;
    box-sizing: border-box;
    z-index: 1;
    background-color: white;
    display: flex;
    flex-direction: column;

    .box {
      padding-left: 5px;
      box-sizing: border-box;
      height: 30px;
      // background-color: red;
      display: flex;
      justify-content: start;
      .icon {
        width: 28px;
        height: 28px;
        background-color: orange;
        margin-right: 5px;
        border-radius: 50%;
        i {
          display: block;
          line-height: 28px;
          text-align: center;
          color: black;
          font-size: 28px;
        }
      }
      .search {
        width: 270px;
        height: 30px;
        border-radius: 5px;
        // border: 1px solid black;
        display: flex;
        background-color: rgb(241, 231, 231);
        .search-icon {
          width: 30px;
          height: 30px;
          // background-color: red;
          i {
            display: block;
            line-height: 30px;
            text-align: center;
          }
        }
        input {
          width: 200px;
          height: 30px;
          border: 0;
          padding: 0;
          margin: 0;
          background-color: rgb(241, 231, 231);
          border-color: transparent;
          &:focus {
            border: 0;
            border-color: transparent;
            outline: none;
          }
        }
      }

      .sort-icon {
        width: 28px;
        height: 28px;

        margin-left: 5px;
        a {
          width: 28px;
          height: 28px;
          i {
            width: 28px;
            font-size: 28px;
            display: block;
            line-height: 28px;
            text-align: center;
          }
        }
      }
      .xiaoxi-icon {
        width: 28px;
        height: 28px;

        margin-left: 5px;
        i {
          width: 28px;
          font-size: 28px;
          display: block;
          line-height: 28px;
          text-align: center;
        }
      }
    }
    .nav {
      height: 40px;
      // background-color: red;
      display: flex;
      justify-content: space-between;
      overflow-x: scroll;
      
      white-space: nowrap;
      div {
        width: 90px;
        height: 40px;
        font-size: 14px;
        text-align: center;
        margin-left: 10px;
        line-height: 40px;
        a {
          height: 40px;
          display: block;
          color: black;
          &:visited {
            color: black;
          }
          span {
            height: 40px;
            display: inline-block;
            box-sizing: border-box;
          }
        }
        .active-icon span {
          font-size: 22px;
          display: block;
          border-bottom: 3px solid orangered;
        }
      }
    }
  }
  main {
    // height: 700px;
    margin-top: 80px;
  }
}
</style>
